<template>
  <div>
    <el-card class="box-cord">
      <div style="position:absolute; right:0;top:0">
        <img v-if="computeGrowDays()===0" src="@/assets/images/start.png" alt="">
        <img v-else-if="computeGrowDays()===100" src="@/assets/images/complete.png" alt="">
        <img v-else src="@/assets/images/plant.png" alt="">
      </div>
      <ul class="left-content">
        <li><img src="@/assets/images/crop.png" alt="" style="width: 80px; height: 80px"></li>
        <li>
          <p>
            <dict-tag :type="DICT_TYPE.PRODUCE_INFO_CROP_SPECIE" :value="row.cropSpecie" />
          </p>
          <p>作物品种：{{ row.cropVarieties ? row.cropVarieties : '--' }}</p>
          <p>种子名称：{{ row.seedName ? row.seedName : '--' }}</p>
          <p>种子使用量：{{ row.usage ? row.usage : '--' }}</p>
        </li>
      </ul>
      <ul class="left-content">
        <li><img src="@/assets/images/map.png" alt="" style="width: 80px; height: 80px"></li>
        <li>
          <p>地块面积：{{ row.plantArea ? row.plantArea + '亩' : '--' }}</p>
          <p>地块编码：{{ row.landCode ? row.landCode : '--' }}</p>
          <p>种植标准：
            <dict-tag :type="DICT_TYPE.PLANTING_STANDARD_TYPE" :value="row.plantStandards" />
          </p>
          <p>
            种植环境：
            <dict-tag :type="DICT_TYPE.PLANTING_ENVIRONMENT_TYPE" :value="row.plantEnvironment" />
          </p>
        </li>
      </ul>
      <div class="right-contnet">
        <div class="right-title">当前所在周期：<span>{{ row.name }}</span></div>
        <ul>
          <li>
            <img src="@/assets/images/seedling.png" alt="" />
            <p>定植日期</p>
            <p>{{ formatDate(new Date(row.colonizationTime), "yyyy-MM-dd") }}</p>
          </li>
          <li>
            <img src="@/assets/images/hourglass.png" alt="" />
            <p>种植开始日期</p>
            <p>{{ formatDate(new Date(row.plantTime), "yyyy-MM-dd") }}</p>
          </li>
          <li>
            <img src="@/assets/images/basket.png" alt="" />
            <p>采收开始日期</p>
            <p>{{ formatDate(new Date(row.harvestTime), "yyyy-MM-dd") }}</p>
          </li>
        </ul>
      </div>
    </el-card>
    <div class="progress">
      <el-progress :percentage="computeGrowDays()" :format="format" :stroke-width="25" :text-inside="true" />
      <ul class="growth-cycle">
        <li class="line"></li>
        <li class="growth-date">{{ formatDate(new Date(row.plantTime), "MM-dd") }}</li>
        <li v-for="(item,index) in growthModuleData" :key="index">
          <ul>
            <li class="growth-name">{{ item.name }}</li>
            <li class="growth-date">{{ item.date }}</li>
            <li class="line"></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

  <script>
  import {getAllColumn} from "@/api/system/growth/type.js";
  import {addDays} from '@/utils/dateUtils.js'

  export default {
  props: {
    row: {
      type: Object
    },
  },
  data () {
    return {
      growthModuleData: [],
    }
  },
  mounted () {
    this.getColumn()
  },
  methods: {
    formatDate (date, format) {
      if (date != null) {
        let time = {
          "M+": date.getMonth() + 1,
          "d+": date.getDate(),
          "h+": date.getHours(),
          "m+": date.getMinutes(),
          "s+": date.getSeconds(),
          "q+": Math.floor((date.getMonth() + 3) / 3),
          "S+": date.getMilliseconds(),
        };
        if (/(y+)/i.test(format)) {
          format = format.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        }
        for (let k in time) {
          if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? time[k]
                : ("00" + time[k]).substr(("" + time[k]).length)
            );
          }
        }
        return format;
      }
    },
    format (percentage) {
      if (percentage === 0) {
        return '已生长0天'
      } else if (percentage === 100) {
        return '已生长' + this.computeDay(new Date(this.row.harvestTime), new Date(this.row.plantTime)) + '天'
      } else {
        return '已生长' + this.computeDay(new Date(Date.now()), new Date(this.row.plantTime)) + '天'
      }
    },
    computeGrowDays () {
      if (this.row.harvestTime != null && this.row.plantTime != null) {
        if (this.formatDate(new Date(Date.now()), 'yyyy-MM-dd') >=
          this.formatDate(new Date(this.row.harvestTime), 'yyyy-MM-dd')) {
          return 100;
        } else {
          return (
            Math.round(
              (this.computeDay(new Date(Date.now()), new Date(this.row.plantTime))) /
              this.computeDay(new Date(this.row.harvestTime), new Date(this.row.plantTime)) *
              10000
            ) / 100.0
          );
        }
      } else {
        return 0;
      }
    },
    computeDay (sDate1, sDate2) {
      let dateSpan, tempDate, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
    getColumn () {
      const id = this.row.growthId;
      let newDate
      let time = new Date(this.row.plantTime);
      let day = 0;
      getAllColumn(id).then((resp) => {
        resp.data.growthModuleListDOS[0].growthModuleDataDOS.map((item) => {
          day += parseInt(item.times);
          newDate = addDays(time, day)
          newDate = newDate.substring(newDate.indexOf("-") + 1)
          this.growthModuleData.push({ name: item.name, date: newDate })
        })
      })
    }
  }


}
</script>

<style lang="scss" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.box-cord {
  box-shadow: 1px 10px 20px 1px rgba(67, 98, 255, 0.1);
  border-radius: 8px 8px 8px 8px;
  margin: 0 20px;
  position: relative;

  .left-content {
    margin: 30px 0;
    float: left;
    width: 28%;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(153, 153, 153, 0.2);

    li:first-child {
      padding-right: 15px;
    }

    li {
      p {
        color: #999999;
        margin: 5px 0;
      }

      p:first-child {
        color: #333333;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }

  .right-contnet {
    padding: 30px;
    float: left;
    width: 44%;

    .right-title {
      padding-left: 30px;
      padding-bottom: 15px;
      color: #999999;

      span {
        color: #f77d2a;
      }
    }

    ul {
      display: flex;
      justify-content: space-around;
      text-align: center;

      li {
        p {
          margin: 5px 0;
          color: #999999;
        }

        p:last-child {
          margin: 12px 0;
          color: #333333;
        }
      }
    }
  }
}

.progress {
  padding: 100px 50px;
  ::v-deep .el-progress-bar__inner {
    background-image: linear-gradient(
      95deg,
      #35b2fc 0%,
      #a436d3 52%,
      #f97d29 100%
    );
  }

  .growth-cycle {
    width: 100%;
    li{
      //float: left;
      height: 200px;
    }
    display: flex;
    justify-content: space-between;
    ul {
      display: flex;
      justify-content: space-between;

      li {
        //height: 200px;
      }
      .growth-name {
        align-self: center;
        width: 100px;
        height: 40px;
        line-height: 40px;
        color: #4362ff;
        box-shadow: 0 3px 6px 1px rgba(67, 98, 255, 0.2);
        border-radius: 26px;
        border: 1px solid #4362ff;
        text-align: center;
      }
    }
    .growth-date {
      height: 14px;
      align-self: flex-end;
    }
    .line {
      width: 0;
      border: 1px dashed #999999;
    }
  }
}
</style>
